<template>
  <div
    class="layout-logo"
    :class="{ 'layout-logo--collapsed': collapsed }"
    @click="$router.push($config.homePath)"
  >
    <img class="layout-logo--icon" :src="collapsed ? logoCollapsed : logo" />
  </div>
</template>

<script>
import logoCollapsed from '@/assets/images/logo-collapsed.png'
import logo from '@/assets/images/logo.png'

export default {
  props: {
    collapsed: {
      type: Boolean
    }
  },
  data() {
    return {
      logoCollapsed,
      logo
    }
  }
}
</script>

<style lang="less" scoped>
.layout-logo {
  cursor: pointer;
  color: #fff;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 12px;
  height: 36px;
  overflow: hidden;

  &--collapsed {
    margin-bottom: 6px;
  }

  img {
    height: 100%;
  }
}
</style>
